<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>MarkerClusterer v1.0 Reference</title>
    <link rel="stylesheet" type="text/css" href="http://code.google.com/css/codesite.css"></link>
    <link rel="stylesheet" type="text/css" href="../../util/docs/template/local_extensions.css"></link>
  </head>
  <body>
    <h1>MarkerClusterer</h1>
    <p>
This javascript library creates and manages per-zoom-level
clusters for large amounts of markers (hundreds or thousands).
This library was inspired by the <a href="http://www.maptimize.com">
Maptimize</a> hosted clustering solution.
<br /><br/>
<b>How it works</b>:<br/>
The <code>MarkerClusterer</code> will group markers into clusters according to
their distance from a cluster's center. When a marker is added,
the marker cluster will find a position in all the clusters, and
if it fails to find one, it will create a new cluster with the marker.
The number of markers in a cluster will be displayed
on the cluster marker. When the map viewport changes,
<code>MarkerClusterer</code> will destroy the clusters in the viewport
and regroup them into new clusters.</p>
    <p>For a description and examples of how to use this library, check out the <a href="examples.html">how-to</a>.</p>
    
      <h2><a name="MarkerClusterer"></a>class MarkerClusterer</h2>
      <p></p>
      
        <h3>Constructor</h3>
        <table summary="class MarkerClusterer - Constructor" width="90%">
          
          <tbody>
            <tr>
              <th>Constructor</th>
              
              <th>Description</th>
            </tr>
            
              <tr class="odd">
                <td><code>MarkerClusterer(<span class="type">map:GMap2</span>, <span class="type">opt_markers:Array of GMarker</span>, <span class="type">opt_opts:MarkerClustererOptions</span>)</code></td>
                
                <td>Creates a new MarkerClusterer to cluster markers on the map.</td>
              </tr>
            
          </tbody>
        </table>
      
        <h3>Methods</h3>
        <table summary="class MarkerClusterer - Methods" width="90%">
          
          <tbody>
            <tr>
              <th>Methods</th>
              
                
                  <th>Return&nbsp;Value</th>
                
              
              <th>Description</th>
            </tr>
            
              <tr class="odd">
                <td><code>addMarkers(<span class="type">markers:Array of GMarker</span>)</code></td>
                
                  
                    <td><code>None</code></td>
                  
                
                <td>Add a set of markers.</td>
              </tr>
            
              <tr class="even">
                <td><code>clearMarkers()</code></td>
                
                  
                    <td><code>None</code></td>
                  
                
                <td>Remove all markers from MarkerClusterer.</td>
              </tr>
            
              <tr class="odd">
                <td><code>getCalculator()</code></td>
                
                  
                    <td><code>Object</code></td>
                  
                
                <td>Get calculator function.</td>
              </tr>
            
              <tr class="even">
                <td><code>getParentCluster(<span class="type">marker:GMarker</span>)</code></td>
                
                  
                    <td><code>Cluster</code></td>
                  
                
                <td>Returns the cluster containing this marker, if any.</td>
              </tr>
            
              <tr class="odd">
                <td><code>getStyles()</code></td>
                
                  
                    <td><code>Array of String</code></td>
                  
                
                <td>Get cluster marker images of this marker cluster. Mostly used by <code>Cluster</code></td>
              </tr>
            
              <tr class="even">
                <td><code>getTotalClusters()</code></td>
                
                  
                    <td><code>int</code></td>
                  
                
                <td>Get total number of clusters.</td>
              </tr>
            
              <tr class="odd">
                <td><code>getTotalMarkers()</code></td>
                
                  
                    <td><code>Number</code></td>
                  
                
                <td>Get total number of markers.</td>
              </tr>
            
              <tr class="even">
                <td><code>isZoomOnClick()</code></td>
                
                  
                    <td><code>Boolean</code></td>
                  
                
                <td>Get boolean value representing whether default behaviour of zooming on cluster upon clicking should be used.</td>
              </tr>
            
              <tr class="odd">
                <td><code>removeMarker(<span class="type">marker:GMarker</span>)</code></td>
                
                  
                    <td><code>None</code></td>
                  
                
                <td>Remove a marker.</td>
              </tr>
            
              <tr class="even">
                <td><code>resetViewport()</code></td>
                
                  
                    <td><code>None</code></td>
                  
                
                <td>Collect all markers of clusters in viewport and regroup them.</td>
              </tr>
            
              <tr class="odd">
                <td><code>setCalculator(<span class="type">calculator:Function</span>)</code></td>
                
                  
                    <td><code>None</code></td>
                  
                
                <td>Set calculator function</td>
              </tr>
            
          </tbody>
        </table>
      
    
      <h2><a name="MarkerClustererOptions"></a>class MarkerClustererOptions</h2>
      <p>This class represents optional arguments to the <code><a href="reference.html#MarkerClusterer">MarkerClusterer</a></code>
constructor.  There is no constructor for this class.  Instead, this class is instantiated as a javascript object literal.</p>
      
        <h3>Properties</h3>
        <table summary="class MarkerClustererOptions - Properties" width="90%">
          
          <tbody>
            <tr>
              <th>Properties</th>
              
                
                  <th>Type</th>
                
              
              <th>Description</th>
            </tr>
            
              <tr class="odd">
                <td><code>calculator</code></td>
                
                  
                    <td><code>Function</code></td>
                  
                
                <td>A function to calculator what will be showed
on cluster marker and what kind of style will cluster marker be.
This function auto called by Cluster. The default calculator will show number
of markers in a cluster. This function take one parm: markers.
You can add some property to marker of this markers array to calculat values.
This function returns an object:
{
  'text': 'The text to be showed on cluster marker',
  'index': 'Style index in array of MarginStylesOptions user passed.'
}</td>
              </tr>
            
              <tr class="even">
                <td><code>gridSize</code></td>
                
                  
                    <td><code>Number</code></td>
                  
                
                <td>The grid size of a cluster in pixel. Each
cluster will be a square. If you want the algorithm to run faster, you can set
this value larger.  The default value is <code>60</code>.</td>
              </tr>
            
              <tr class="odd">
                <td><code>maxZoom</code></td>
                
                  
                    <td><code>Number</code></td>
                  
                
                <td>The max zoom level monitored by a
marker cluster. If not given, the marker cluster assumes the maximum map
zoom level. When maxZoom is reached or exceeded all markers will be shown
without cluster.</td>
              </tr>
            
              <tr class="even">
                <td><code>styles</code></td>
                
                  
                    <td><code>Array of MarkerStyleOptions</code></td>
                  
                
                <td>Custom styles for the cluster markers.
The array should be ordered according to increasing cluster size,
with the style for the smallest clusters first, and the style for the
largest clusters last.</td>
              </tr>
            
              <tr class="odd">
                <td><code>zoomOnClick</code></td>
                
                  
                    <td><code>Boolean</code></td>
                  
                
                <td>Whether default behaviour of zooming on a cluster
upon clicking should be used.  The default value is <code>true</code>.</td>
              </tr>
            
          </tbody>
        </table>
      
    
      <h2><a name="MarkerStyleOptions"></a>class MarkerStyleOptions</h2>
      <p>An array of these is passed into the <code><a href="reference.html#MarkerClustererOptions">MarkerClustererOptions</a></code>
styles option.  There is no constructor for this class.  Instead, this class is instantiated as a javascript object literal.</p>
      
        <h3>Properties</h3>
        <table summary="class MarkerStyleOptions - Properties" width="90%">
          
          <tbody>
            <tr>
              <th>Properties</th>
              
                
                  <th>Type</th>
                
              
              <th>Description</th>
            </tr>
            
              <tr class="odd">
                <td><code>height</code></td>
                
                  
                    <td><code>Number</code></td>
                  
                
                <td>Image height.</td>
              </tr>
            
              <tr class="even">
                <td><code>height</code></td>
                
                  
                    <td><code>Number</code></td>
                  
                
                <td>Image width.</td>
              </tr>
            
              <tr class="odd">
                <td><code>opt_anchor</code></td>
                
                  
                    <td><code>Array of Number</code></td>
                  
                
                <td>Anchor for label text, like [24, 12].
   If not set, the text will align center and middle.</td>
              </tr>
            
              <tr class="even">
                <td><code>opt_textColor</code></td>
                
                  
                    <td><code>String</code></td>
                  
                
                <td>Text color.  The default value is <code>"black"</code>.</td>
              </tr>
            
              <tr class="odd">
                <td><code>opt_textSize</code></td>
                
                  
                    <td><code>Number</code></td>
                  
                
                <td>Text size in px.  The default value is <code>11</code>.</td>
              </tr>
            
              <tr class="even">
                <td><code>url</code></td>
                
                  
                    <td><code>String</code></td>
                  
                
                <td>Image url.</td>
              </tr>
            
          </tbody>
        </table>
      
    
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
    <script type="text/javascript">
      _uacct = "UA-964209-4";
      urchinTracker();
    </script> 
  </body>
</html>
